<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/examindex' }">考试管理</el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ path: '/examoverview' }">考试概览</el-breadcrumb-item>
			  <el-breadcrumb-item>批次扫描</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="contentMain">
			<div class="idenboxmain">
				<div class="dtkanswerlist">
					<p>
						答题卡扫描上传：
						<el-select v-model="scanType" placeholder="" @change="scanchange" clearable>
						    <el-option
						      v-for="item in sbtype"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						</el-select>
					</p>
					<ul>
						<li>上报学生：-</li>
						<li>已扫描数：-</li>
						<li>已上报数：-</li>
					</ul>
				</div>
				<div class="identistatusmodify">
					<div class="tychulititle">识别统一处理<div v-if="sbstatus.paperCount===sbstatus.identifyCount"><i class="el-icon-success"></i>识别完成</div><div v-else><i class="el-icon-loading"></i>识别中</div><span>/ 识别进度：{{sbstatus.paperCount}}（{{preogressstatus}}%）</span></div>
					<ul class="tychuliul">
						<li @click="$router.push('/abnormalexamnumber')">
							<h4>考号异常处理：{{sbstatus.examNoExceptionCount}}</h4>
							<span>考号未识别、不存在、重复等</span>
						</li>
						<li @click="$router.push('/optionexception')">
							<h4>选项异常处理：{{sbstatus.optionExceptionCount}}</h4>
							<span>客观题多涂、未涂、置信度低等</span>
						</li>
						<li @click="$router.push('/abnormalrating')">
							<h4>打分异常处理：{{sbstatus.scoreExceptionCount}}</h4>
							<span>评阅教师给分多涂、未涂、置信度低等情况</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="searchlist">
				<router-link to="/batchscanning" active-class="hover">批次扫描</router-link>
				<router-link to="/identificationrecord" active-class="hover">识别记录</router-link>
				<router-link to="/notuploaded" active-class="hover">未上传</router-link>
				<router-link to="/listofabsences" active-class="hover">缺考名单</router-link>
			</div>
			<div class="overviewcontent">
				<div class="studentSearch">
					<el-select v-model="objquery.examRoomNumbe" placeholder="全部扫描人" change="examRoomNumber" clearable>
					    <el-option
					      v-for="item in examlist"
					      :key="item"
					      :label="item"
					      :value="item">
					    </el-option>
					</el-select>
					<el-select v-model="classIdlist" placeholder="全部状态" @change="classId" clearable>
					    <el-option
					      v-for="item in classlist"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select>
					<el-select v-model="classIdlist" placeholder="请选择事件" @change="classId" clearable>
					    <el-option
					      v-for="item in classlist"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select>
				</div>
				<div class="tableContent">
					<el-table
						class="custom-table"
					    ref="multipleTable"
					    :data="identificationlist"
					    tooltip-effect="dark"
					    style="width: 100%"
					    @selection-change="handleSelectionChange"
						:height="tableHeight"
						stripe
						:header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
					    <el-table-column
					      type="selection"
					      width="55">
					    </el-table-column>
					    <el-table-column
						 type="index"
					      label="批次">
					    </el-table-column>
					    <el-table-column
					      prop="studentName"
					      label="扫描数量">
					    </el-table-column>
						<el-table-column
						  label="图片数量">
						  <template slot-scope="scope">
							  {{scope.row.examNumber}}
						  </template>
						</el-table-column>
						<el-table-column
						  label="扫描人">
						  <template slot-scope="scope">{{ scope.row.className }}</template>
						</el-table-column>
						<el-table-column
						  label="扫描开始时间">
						  <template slot-scope="scope">{{ scope.row.examRoomNumber }}</template>
						</el-table-column>
						<el-table-column
						  label="扫描结束时间">
						  <template slot-scope="scope">{{ scope.row.seatNumber }}</template>
						</el-table-column>
						<el-table-column
							fixed="right"
							label="扫描操作"
							align="center"
							width="150">
							<template slot-scope="scope">
								<div style="display: flex;">
									<el-button @click="handleClick(scope.row)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png" style="width:12px;margin-right:5px;" />查看记录</el-button>
									<!-- <el-button v-if="scope.row.missingExam" @click="missanexam(scope.row.id)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png" style="width:12px;margin-right:5px;" />删除批次</el-button> -->
									<el-button @click="deletecard(scope.row)" type="text" size="small" style="display: flex;align-items: center;color:#EC555A"><img src="../../assets/image/school/del.png" style="width:12px;margin-right:5px;" />删除批次</el-button>
								</div>
							</template>
						</el-table-column>
					  </el-table>
				</div>
			</div>
		</div>
		<div class="examfooter">
			<div class="examFootercontent">
				<div class="totaldata">
					<span>已选<i>{{multipleSelection.length}}</i>项 / 共{{total}}项</span>
					<em @click="batchdelete">批量删除</em>
					<!-- <em>导出名单</em> -->
				</div>
				<div>
					<el-pagination
						background
					      @current-change="handleCurrentChange"
					      layout="prev, pager, next, jumper"
					      :total="total">
					    </el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	import { get, post, del, put } from '../../request/api.js'
	export default{
		data(){
			return{
				identificationlist:[],
				page:1,
				pageSize:10,
				objquery:{
					examCourseId:0,
					batchNumber:'',
					examRoomNumber:'',
					classId:'',
					recognizeErrorCode:'',
					examNumber:'',
					studentName:''
				},
				multipleSelection:[],
				total:0,
				errortypelist:[
					{
						name:'试卷异常',
						id:1000
					},
					{
						name:'定位点识别异常',
						id:1100
					},
					{
						name:'未知准考证号',
						id:2000
					},
					{
						name:'无对应考生',
						id:2100
					},
					{
						name:'重复试卷',
						id:2200
					},
					{
						name:'缺考',
						id:3000
					},
					{
						name:'单选多个答案',
						id:4000
					},
					{
						name:'缺少选项',
						id:4100
					},
					{
						name:'选科异常',
						id:5000
					}
				],
				classlist:[],
				examlist:[],
				sbtype:[
					{
						name:'允许扫描',
						id:1
					},
					{
						name:'停止扫描',
						id:2
					}
				],
				scanType:'',
				classIdlist:'',
				tableHeight:'',
				sbstatus:{},
				preogressstatus:''
			}
		},
		mounted() {
			this.examobjcontent = JSON.parse(sessionStorage.getItem('examInfo'))
			this.identificationtab(this.examobjcontent.id)
			this.classifytablist(this.examobjcontent.examinationId)
			this.examtablist(this.examobjcontent.examinationId)
			this.cardStatus()
			this.cardsmstatus()
			this.tableHeight = parseInt( document.documentElement.clientHeight-480)
		},
		methods:{
			//获取答题卡扫描状态
			cardsmstatus(){
				let obj={
					examCourseId:this.examobjcontent.id
				}
				get('/scanpaperexception/exception',obj)
				.then(res=>{
					//console.info(res)
					if(res.code==200){
						this.sbstatus = res.data
						this.preogressstatus = ((res.data.identifyCount/res.data.paperCount)*100).toFixed(2)
					}else{
						this.$message.error(res.message);
					}
				})
			},
			batchdelete(){
				
			},
			// 答题卡扫描状态
			cardStatus(){
				let obj={
					examCourseId:this.examobjcontent.id
				}
				get('/exampaper/state',obj)
				.then(res=>{
					//console.info(res)
					this.scanType = res.data==0?'扫描未开始':res.data==3?'完成扫描':res.data
				})
				.catch(error=>{
						
				})
			},
			scanchange(val){
					let obj={
						examCourseId:this.examobjcontent.id,
						status:val
					}
					get('/exam/updatestatus',obj)
					.then(res=>{
						//console.info(res)
					})
					.catch(error=>{
						
					})
			},
			missanexam(id){
				// let ids = [id]
				let obj = {
					studentIds:[id],
					examCourseId:this.examobjcontent.id
				}
				this.$confirm('批量缺考, 是否继续?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						post('/exampaper/uploadmissexam',obj)
						.then(res=>{
							if(res.code==200){
								this.$message({
									type: 'success',
									message: '缺考成功!'
								});
								this.identificationtab(this.examobjcontent.id)
							}else{
								this.$message.error(res.message);
							}
						})
						.catch(error=>{
							this.$message.error(error.message);
						})
					  
					}).catch(() => {
					  this.$message({
						type: 'info',
						message: '已取消缺考'
					  });          
				});
			},
			batchdmissexam(){
				if( this.multipleSelection.length>0){
					let ids = this.multipleSelection.map(item => item.id);
					let obj = {
						studentIds:ids,
						examCourseId:this.examobjcontent.id
					}
					this.$confirm('批量缺考, 是否继续?', '提示', {
						  confirmButtonText: '确定',
						  cancelButtonText: '取消',
						  type: 'warning'
						}).then(() => {
							post('/exampaper/uploadmissexam',obj)
							.then(res=>{
								if(res.code==200){
									this.$message({
										type: 'success',
										message: '缺考成功!'
									});
									this.identificationtab(this.examobjcontent.id)
								}else{
									this.$message.error(res.message);
								}
							})
							.catch(error=>{
								this.$message.error(error.message);
							})
						  
						}).catch(() => {
						  this.$message({
							type: 'info',
							message: '已取消缺考'
						  });          
					});
				}else{
					this.$message({
					  type: 'warning',
					  message:'请先选择要缺考的内容'
					});
				}
			},
			classifytablist(id){
				get('/exampaper/classlist',{examId:id})
				.then(res=>{
					if(res.code==200){
						//console.info(res)
						this.classlist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			},
			examtablist(id){
				get('/exampaper/roomlist',{examId:id})
				.then(res=>{
					if(res.code==200){
						//console.info(res)
						this.examlist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			},
			identificationtab(id){
				this.objquery.examCourseId = id
				this.objquery.classId = this.classIdlist?this.classIdlist:0
				this.objquery.recognizeErrorCode=this.objquery.recognizeErrorCode?this.objquery.recognizeErrorCode:0
				let obj={
					page:this.page,
					pageSize:this.pageSize,
					query:this.objquery
				}
				post('/exampaper/uploadlist',obj)
				.then(res=>{
					if(res.code==200){
						//console.info(res)
						this.total = res.data.total
						this.identificationlist = res.data.items
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			},
			batchNumber(val){
				this.objquery.batchNumber =val
				this.identificationtab(this.examobjcontent.id)
			},
			examRoomNumber(val){
				this.objquery.examRoomNumber =val
				this.identificationtab(this.examobjcontent.id)
			},
			classId(val){
				this.objquery.classId =val
				this.identificationtab(this.examobjcontent.id)
			},
			recognizeErrorCode(val){
				this.objquery.recognizeErrorCode =val
				this.identificationtab(this.examobjcontent.id)
			},
			examNumber(val){
				this.objquery.examNumber =val
				this.identificationtab(this.examobjcontent.id)
			},
			studentName(val){
				this.objquery.studentName =val
				this.identificationtab(this.examobjcontent.id)
			},
			handleCurrentChange(val){
				this.page = val
				this.identificationtab(this.examobjcontent.id)
			},
			handleSelectionChange(val){
				 this.multipleSelection = val;
			}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:20px;
	}
	.breadBox{
		height:32px;
		background: #fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.overviewcontent{
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		width:auto;padding:0 40px;
		margin:20px auto;
	}
	.examInfo{
		display: flex;
		align-items: center;
	}
	.examInfo b{
		font-weight: normal;
		font-size:14px;
		color:#333;
		position: relative;
		padding-right:14px;
		margin-right:14px;
	}
	.examInfo b i{
		font-style:normal;
		color:#8E96A4
	}
	.examInfo b::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.examInfo b:last-child::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.overvcontentTop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:24px;
	}
	.overvcontentTop h3{
		font-size:18px;
		font-weight:500;
		padding-bottom:15px;
	}
	.overvcontentTop span{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.tableContent{
		padding:0 24px 30px;
		border-radius: 10px;
		height:calc(100vh - 480px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	.tableContent::-webkit-scrollbar {
		 width:6px;
		background-color: #eee;
		border-radius:10px;
	}
	.tableContent::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.tableContent::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.tableContent table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableContent table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableContent table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableContent table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableContent table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableContent table tr td:last-child{
		border-right:none;
	}
	.tableContent table tr td i{
		display: block;
		font-style: normal;
		font-size:12px;
		color:#999
	}
	.tableContent table tr td em{
		display: block;
	}
	.tableContent table tr td span{
		position:relative;
		display: inline-block;
		cursor: pointer;
	}
	.tableContent table tr td span em{
		font-size:12px;
		font-style:normal;
	}
	.tableContent table tr td span::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#000;
	}
	.tableContent table tr td span.green{
		color:#288F41
	}
	.tableContent table tr td span.green::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#288F41;
	}
	.tableContent table tr td span.blue{
		color:#295CFF
	}
	.tableContent table tr td span.blue::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#295CFF;
	}
	.tableContent table tr td span.red{
		color:#EC555A
	}
	.tableContent table tr td span.red::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#EC555A;
	}
	.tableContent table tr td span.gray{
		color:#D8E4F0
	}
	.tableContent table tr td span.gray::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#D8E4F0;
	}
	.tableContent table tr:nth-child(3n){
		background:#FAFAFB
	}
	.studentSearch{
		display: flex;
		padding:24px 24px 24px;
		justify-content: left;
	}
	.studentSearch .el-select{
		width:124px;
		margin-right:24px;
	}
	.studentSearch >>> .el-input__inner{
		width: 124px;
		border-radius: 10px;
		height:35px;
		font-size:14px;
	}
	.studentSearch >>> .el-input__icon{
		line-height:35px;
	}
	.el-input{
		width:auto;
		margin-right:24px;
	}
	.studentSearch b{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.examfooter{
		width:100%;
		height:54px;
		background: rgba(255,255,255,0.9);
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		position:fixed;
		left:0;
		bottom:0;
		z-index:100
	}
	.examFootercontent{
		width:auto;padding:0 40px;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
		color:#557292;
		display: flex;
		justify-content: left;
		align-items: center;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
	.examFootercontent .totaldata em{
		font-style:normal;
		width: 96px;
		height: 34px;
		border-radius: 10px;
		line-height:34px;
		background: #295CFF;
		text-align: center;
		color:#fff;
		margin-left:14px;
		cursor: pointer;
	}
	.examFootercontent .totaldata em:last-child{
		background:#EC555A;
	}
	.examFootercontent .totaldata >>> .el-pager li.active{
		background-color:#295CFF
	}
	.scorered{
		font-size:14px;
		color:#EC555A;
		padding:24px 0;
	}
	.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.examFootercontent >>> .el-pagination__jump{
		margin-left:5px;
	}
	.examFootercontent >>> .el-pager{
		margin-top:2px;
	}
	.examFootercontent >>> .el-pager li{
		margin:0 3px;
		min-width:25px;
		height: 25px;
		line-height: 25px
	}
	.examFootercontent >>> .el-pagination button{
		height:25px;
		line-height:25px;
		margin-top:2px;
	}
	.answerlist{
		display: flex;
		align-items: center;
	}
	.smallsubject{
		width: 48px;
		height: 22px;
		font-size:14px;
		text-align: center;
		line-height:22px;
		border-radius: 6px;
		margin:0 5px;
		background: rgba(162,53,113,0.06);
		border: 1px solid rgba(162,53,113,0.5);
		color:#A23571;
	}
	.answerlist li{
		width: 48px;
		height: 22px;
		font-size:14px;
		text-align: center;
		line-height:22px;
		border-radius: 6px;
		margin:0 5px;
	}
	.answerlist li:nth-child(1){
		background: rgba(101,157,113,0.06);
		border: 1px solid rgba(101,157,113,0.5);
		color:#659D71
	}
	.answerlist li:nth-child(2){
		background: rgba(49,121,190,0.06);
		border: 1px solid rgba(49,121,190,0.5);
		color:#3179BE
	}
	.answerlist li:nth-child(3){
		background: rgba(84,62,164,0.06);
		border: 1px solid rgba(84,62,164,0.5);
		color:#543EA4
	}
	.answerlist li:nth-child(4){
		background: rgba(101,157,113,0.06);
		border: 1px solid rgba(101,120,157,0.5);
		color:#65789D
	}
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
		justify-content: center;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.choosestudent{
		display: flex;
		align-items: center;
		padding:10px 0 24px;
	}
	.choosestudent span{
		font-size: 14px;
		color: #557292;
	}
	.choosestudent  >>> .el-input__inner{
		width: 436px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.choosestudent  >>> .el-input__icon{
		line-height:34px;
	}
	.checkbox-group{
		font-size:14px;
		color:#5B6371;
		margin-bottom:20px;
	}
	.el-checkbox{
		margin-bottom:12px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:80px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#295CFF;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
	.addExamContent >>> .el-upload-dragger{
		width:522px;
	}
	.uploadbox{
		width:522px;
		height:220px;
		position:relative;
	}
	.uploadbox a{
		position:absolute;
		right:0;
		bottom:10px;
		font-size:14px;
		color:#295CFF;
	}
	.dtkanswerlist{
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 10px;
		padding:24px 24px;
		margin-top:14px;
	}
	.dtkanswerlist p{
		font-size:16px;
		color:#000;
	}
	.dtkanswerlist p span{
		display: block;
		color:#295CFF;
		font-size:14px;
	}
	.dtkanswerlist ul{
		font-size:14px;
		color:#999;
		padding-top:14px;
	}
	.dtkanswerlist ul li{
		padding-right:50px;
		line-height:1.8;
	}
	.dtkanswerlist >>> .el-input__inner{
		width: 124px;
		border-radius: 10px;
		height: 35px;
		font-size: 14px;
	}
	.dtkanswerlist >>> .el-input__icon{
		line-height:35px;
	}
	/* 针对 Webkit 内核浏览器（如 Chrome, Safari） */
	.el-table__body::-webkit-scrollbar {
	  width: 6px; /* 滚动条宽度 */
	  height: 6px; /* 滚动条高度 */
	}
	
	.el-table__body::-webkit-scrollbar-thumb {
	  background:#619CF5; /* 滚动条颜色 */
	  border-radius: 3px;
	}
	
	.el-table__body::-webkit-scrollbar-track {
	  background:#619CF5; /* 滚动条轨道颜色 */
	  border-radius: 3px;
	}
	
	/* 针对 Firefox */
	.el-table__body {
	  scrollbar-width: thin; /* 滚动条宽度 */
	  scrollbar-color: #619CF5; /* 滚动条颜色和轨道颜色 */
	}
	.contentMain >>> .el-table--scrollable-y::-webkit-scrollbar {
		width:4px !important;
		background-color:#619CF5;
		border-radius:10px;
	}
	.contentMain >>> .el-table__body-wrapper::-webkit-scrollbar-track {
		background-color: #619CF5;
		border-radius:10px;
	}
	.contentMain >>> .el-table--scrollable-y::-webkit-scrollbar-track {
		background-color: #619CF5;
		border-radius:10px;
	}
	.contentMain >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.contentMain >>> .el-table--scrollable-y::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.contentMain >>> .el-table__fixed-right-patch{
		width:0 !important
	}
	.contentMain >>> .el-table__fixed-right{
		right:4px !important
	}
	.contentMain >>> .el-table .el-table__cell{
		padding:9px 0;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
	.idenboxmain{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.dtkanswerlist{
		width: 335px;
		height: 194px;
		box-shadow: 0 4px 16px 0 #5572921a;
		border-radius: 10px;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 10px;
		padding:24px 24px;
		margin-top:14px;
	}
	.identistatusmodify{
		width:calc(100% - 350px);
		height: 194px;
		box-shadow: 0 4px 16px 0 #5572921a;
		border-radius: 10px;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 10px;
		padding:24px 24px;
		margin-top:14px;
	}
	.tychulititle{
		font-size:16px;
		color:#2A303B;
		display: flex;
		align-items: center;
	}
	.tychulititle div{
		color:#295CFF;
		padding-left:15px;
		padding-right:4px;
	}
	.tychulititle span{
		color:#8E96A4;
	}
	.tychuliul{
		display: flex;
		align-items: center;
		padding-top:14px;
	}
	.tychuliul li{
		box-sizing: border-box;
		width: 324px;
		height: 106px;
		border-radius: 10px;
		padding:14px;
		cursor: pointer;
	}
	.tychuliul li:first-child{
		background: #ec555a0a;
		border: 1px solid #ec555a33;
	}
	.tychuliul li{
		background: #295cff0a;
		border: 1px solid #295cff33;
		margin-left:14px;
	}
	.tychuliul li h4{
		font-size:14px;
		color:#333333;
		padding-bottom:5px;
	}
	.tychuliul li span{
		color:#8E96A4;
		font-size:12px;
	}
</style>